<!--
 * @Author: Wushiqi
 * @Descripttion: 
 * @Date: 2020-10-22 21:39:18
 * @LastEditors: Wushiqi
 * @LastEditTime: 2020-10-22 22:21:33
-->
<template>
  <div>
    <navbar />
    <van-divider class="hava-category">现有栏目</van-divider>
    <div class="new-category newcategory">
      <p v-for="(item, key) in newCat" :key="key" @click="handleCategoryClick(key)">{{ item.title }}</p>
    </div>
    <van-divider class="delete-category">已删除栏目</van-divider>
    <div class="new-category delcategory">
      <p v-for="(item, key) in delCat" :key="key" @click="delCategoryClick(key)">{{ item.title }}</p>
    </div>
  </div>
</template>

<script>
import Navbar from '@/components/common/Navbar'
export default {
  components: {
    Navbar
  },
  data() {
    return {
      newCat: [],
      delCat: []
    }
  },
  watch: {
    newCat() {
      localStorage.setItem('newCat', JSON.stringify(this.newCat))
      localStorage.setItem('delCat', JSON.stringify(this.delCat))
    }
  },
  created() {
    if (localStorage.getItem('newCat') && localStorage.getItem('delCat')) {
      this.newCat = JSON.parse(localStorage.getItem('newCat'))
      this.delCat = JSON.parse(localStorage.getItem('delCat'))
      return
    }
    this.selectCategory()
  },
  methods: {
    async selectCategory() {
      const res = await this.$http.get('/category')
      this.newCat = res.data
    },
    // 现有栏目点击事件
    handleCategoryClick: function(index) {
      if (this.newCat.length < 4) {
        this.$msg.fail('至少保留三项')
        return
      }
      this.delCat.push(this.newCat[index]) // 添加到已删除栏目
      this.newCat.splice(index, 1) // 点击消失
    },
    // 现有栏目点击事件
    delCategoryClick: function(index) {
      this.newCat.push(this.delCat[index]) // 添加到现有栏目
      this.delCat.splice(index, 1) // 点击消失
    }
  }
}
</script>

<style scoped lang="scss">
.hava-category {
  color: #1a73e8;
  border-color: #1a73e8;
  padding: 0 16px;
}
.delete-category {
  color: #ee0a24;
  border-color: #ee0a24;
  padding: 0 16px;
}
.new-category {
  display: flex;
  flex-wrap: wrap;
  padding: 0 4.167vw;
  p {
    width: 20%;
    text-align: center;
    margin: 1.389vw 1.944vw;
    padding: 1.944vw 0vw;
  }
}
.newcategory {
  p {
    border: 0.278vw solid #1a73e8;
    color: #1a73e8;
  }
}
.delcategory {
  p {
    color: #ee0a24;
    border: 0.278vw solid #ee0a24;
  }
}
</style>